<!-- 成绩管理 -->
<template>
    <div class="app-container">
        <el-row>
            <el-col :span=24>
                <el-form :model="form" ref="queryForm" size="small" :inline="true" v-show="showSearch">
                    <el-form-item label="姓名">
                        <el-input v-model="form.userName"> </el-input>
                    </el-form-item>
                    <el-form-item label="考试时间">
                        <el-col :span="12">
                            <el-date-picker v-model="form.startDate" align="right" type="date" placeholder="开始日期"
                                value-format="yyyy-MM-dd" :picker-options="pickerOptions">
                            </el-date-picker>
                        </el-col>
                        <el-col :span="12">
                            <el-date-picker v-model="form.endDate" align="right" type="date" placeholder="结束日期"
                                value-format="yyyy-MM-dd" :picker-options="pickerOptions">
                            </el-date-picker>
                        </el-col>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="mini"
                            @click="searchTable(form)">搜索</el-button>
                        <el-button icon="el-icon-refresh" size="mini" @click="emptySearch(form)">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
        </el-row>
        <el-row :gutter="24">
            <el-col :span="24">
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column prop="date" label="姓名">
                    </el-table-column>
                    <el-table-column prop="name" label="身份证">
                        <template slot-scope="scope">
                            <el-popover placement="top-start" title="" trigger="hover" :key='23232323' :ref="2323232">
                                <img :src="scope.row.qrCode" alt="" style="width: 150px;height: 150px">
                                <img slot="reference" :src="scope.row.qrCode" style="width: 80px;height: 80px">
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column prop="address" label="头像">
                    </el-table-column>
                    <el-table-column prop="address" label="部门">
                    </el-table-column>
                    <el-table-column prop="address" label="参考试卷">
                    </el-table-column>
                    <el-table-column prop="address" label="所属题库">
                    </el-table-column>
                    <el-table-column prop="address" label="成绩">
                    </el-table-column>
                    <el-table-column prop="address" label="考试时间">
                    </el-table-column>
                    <el-table-column prop="address" label="是否合格">
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
        <pagination v-show="total > 0" :total="total" :page.sync="gather.current" :limit.sync="gather.size" />
    </div>
</template>
<script>
import {queryExamResultList} from '@/api/onlineQuestion/index'
export default ({
    components: {},
    data() {
        return {
            showSearch: true,
            gather: {
                current: 1,//默认第一页
                size: 10,//一页展示10条
            },
            total: 0,
            form: {

            },
            tableData: [],
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            value1: '',
            value2: ''
        }
    },
    created(){
        this.queryAll();
    },
    methods: {
        // 点击页码及上一页下一页按钮操作
        currentChange(val) {
            this.gather.current = val;
            this.getFactoryListAsync(); //调用接口方法
        },
        //每页展示几条按钮操作
        sizeChange(val) {
            this.gather.size = val;
            this.getFactoryListAsync(); //调用接口方法
        },

        queryAll(){
            queryExamResultList(this.gather).then(res=>{
                if(res.code ==2000){
                     this.tableData = res.data.records;
                     this.total = res.data.total;   
                }
            })
        },
        //搜索
        searchTable(){
                this.queryAll();

        },

    }
})
</script>
<style scoped>
.el-row {
    margin-bottom: 20px;

    &:last-child {
        margin-bottom: 0;
    }
}

.el-col {
    border-radius: 4px;
}

.bg-purple-dark {
    background: #99a9bf;
}

.bg-purple {
    background: #d3dce6;
}

.bg-purple-light {
    background: #e5e9f2;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
}

.row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
}
</style>